import { useState } from 'react';
import { Button, Card, Form, Input, Radio, Typography, message } from 'antd';
import { loginStudent } from '../api/student';
import { loginTeacher } from '../api/teacher';
import { loginAdmin } from '../api/admin';
import { useNavigate } from 'react-router-dom';
import {
  UserOutlined,
  LockOutlined,
  BookOutlined,
  TeamOutlined,
  SafetyOutlined,
  RocketOutlined,
  CheckCircleOutlined
} from '@ant-design/icons';

// 默认账号密码配置
const DEFAULT_ACCOUNTS = {
  student: { username: 'student', password: '123456' },
  teacher: { username: 'teacher', password: '123456' },
  admin: { username: 'admin', password: '123456' },
};

export default function Login() {
  const [loading, setLoading] = useState(false);
  const [selectedRole, setSelectedRole] = useState('student');
  const nav = useNavigate();
  const [form] = Form.useForm();

  return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100">
        <div className="grid grid-cols-1 md:grid-cols-2 w-full max-w-5xl mx-4 shadow-2xl rounded-3xl overflow-hidden bg-white transform transition-all hover:shadow-3xl">
          {/* 左侧装饰区域 */}
          <div className="relative p-12 bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-600 text-white overflow-hidden hidden md:block">
            {/* 背景装饰圆形 */}
            <div className="absolute -top-20 -right-20 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
            <div className="absolute -bottom-20 -left-20 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-white/5 rounded-full blur-2xl"></div>

            {/* 内容 */}
            <div className="relative z-10 h-full flex flex-col justify-between">
              <div>
                <div className="flex items-center mb-6">
                  <BookOutlined className="text-4xl mr-3" />
                  <Typography.Title level={2} className="!mb-0 !text-white">智慧课程管理系统</Typography.Title>
                </div>
                <p className="text-lg opacity-95 leading-relaxed mb-8">
                  一站式教学管理解决方案
                  <br />
                  连接学生、教师与管理员的桥梁
                </p>
                <div className="space-y-3">
                  <div className="flex items-center opacity-90">
                    <CheckCircleOutlined className="mr-2 text-green-300" />
                    <span>高效便捷的课程管理</span>
                  </div>
                  <div className="flex items-center opacity-90">
                    <CheckCircleOutlined className="mr-2 text-green-300" />
                    <span>实时同步的学习进度</span>
                  </div>
                  <div className="flex items-center opacity-90">
                    <CheckCircleOutlined className="mr-2 text-green-300" />
                    <span>智能化的选课系统</span>
                  </div>
                </div>
              </div>

              <div className="mt-8 flex items-center justify-center space-x-2 opacity-80">
                <RocketOutlined className="text-2xl" />
                <span className="text-sm">让教育管理更简单</span>
              </div>
            </div>
          </div>

          {/* 右侧登录表单 */}
          <div className="p-10 md:p-12 flex flex-col justify-center">
            <div className="mb-8">
              <div className="flex items-center mb-2">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center mr-3">
                  <UserOutlined className="text-2xl text-white" />
                </div>
                <Typography.Title level={3} className="!mb-0">欢迎登录</Typography.Title>
              </div>
              <p className="text-slate-500 text-sm ml-16">请选择您的角色并输入账号信息</p>
            </div>

            <Card
                bordered={false}
                className="!shadow-none !bg-transparent"
            >
              <Form
                  form={form}
                  layout="vertical"
                  onFinish={async (v) => {
                    try {
                      setLoading(true);
                      let data;

                      if (v.role === 'student') {
                        // 学生登录：调用后端API
                        data = await loginStudent(v.username, v.password);
                      } else if (v.role === 'teacher') {
                        // 教师登录：调用后端API
                        data = await loginTeacher(v.username, v.password);
                      } else if (v.role === 'admin') {
                        // 管理员登录：调用后端API
                        data = await loginAdmin(v.username, v.password);
                      }

                      localStorage.setItem('token', data.token);
                      localStorage.setItem('role', v.role);
                      if (v.role === 'student') nav('/');
                      else if (v.role === 'teacher') nav('/teacher');
                      else if (v.role === 'admin') nav('/admin');
                    } catch (e: any) {
                      message.error(e.message || '登录失败');
                    } finally {
                      setLoading(false);
                    }
                  }}
                  initialValues={{
                    role: 'student',
                    username: DEFAULT_ACCOUNTS.student.username,
                    password: DEFAULT_ACCOUNTS.student.password
                  }}
              >
                <Form.Item
                    label={<span className="text-slate-700 font-medium">登录角色</span>}
                    name="role"
                    className="mb-6"
                >
                  <Radio.Group
                      buttonStyle="solid"
                      size="large"
                      onChange={(e) => {
                        const role = e.target.value;
                        setSelectedRole(role);
                        const defaultAccount = DEFAULT_ACCOUNTS[role as keyof typeof DEFAULT_ACCOUNTS];
                        form.setFieldsValue({
                          username: defaultAccount.username,
                          password: defaultAccount.password,
                        });
                      }}
                      className="w-full"
                      optionType="button"
                      options={[
                        {
                          label: (
                              <span className="flex items-center justify-center">
                          <BookOutlined className="mr-1.5" />
                          学生
                        </span>
                          ),
                          value: 'student'
                        },
                        {
                          label: (
                              <span className="flex items-center justify-center">
                          <TeamOutlined className="mr-1.5" />
                          教师
                        </span>
                          ),
                          value: 'teacher'
                        },
                        {
                          label: (
                              <span className="flex items-center justify-center">
                          <SafetyOutlined className="mr-1.5" />
                          管理员
                        </span>
                          ),
                          value: 'admin'
                        },
                      ]}
                  />
                </Form.Item>

                <Form.Item
                    name="username"
                    label={<span className="text-slate-700 font-medium">账号</span>}
                    rules={[{ required: true, message: '请输入账号' }]}
                    className="mb-5"
                >
                  <Input
                      placeholder="请输入账号"
                      size="large"
                      prefix={<UserOutlined className="text-slate-400" />}
                      className="rounded-lg"
                  />
                </Form.Item>

                <Form.Item
                    name="password"
                    label={<span className="text-slate-700 font-medium">密码</span>}
                    rules={[{ required: true, message: '请输入密码' }]}
                    className="mb-6"
                >
                  <Input.Password
                      placeholder="请输入密码"
                      size="large"
                      prefix={<LockOutlined className="text-slate-400" />}
                      className="rounded-lg"
                  />
                </Form.Item>

                <Button
                    type="primary"
                    htmlType="submit"
                    loading={loading}
                    block
                    size="large"
                    className="h-12 rounded-lg bg-gradient-to-r from-blue-500 to-indigo-600 border-none shadow-md hover:shadow-lg transition-all hover:scale-[1.02] font-medium text-base"
                >
                  {loading ? '登录中...' : '登录系统'}
                </Button>
              </Form>
              <div className="mt-6 pt-6 border-t border-slate-200">
                <div className="text-center">
                  <div className="text-xs text-slate-500 mb-3">测试账号（默认密码均为 123456）</div>
                  <div className="flex flex-wrap items-center justify-center gap-2 text-xs">
                    <div className="flex items-center px-3 py-1.5 bg-blue-50 rounded-full hover:bg-blue-100 transition-colors">
                      <BookOutlined className="mr-1.5 text-blue-500" />
                      <span className="text-slate-600">学生：</span>
                      <span className="ml-1 font-medium text-blue-600">student</span>
                    </div>
                    <div className="flex items-center px-3 py-1.5 bg-green-50 rounded-full hover:bg-green-100 transition-colors">
                      <TeamOutlined className="mr-1.5 text-green-500" />
                      <span className="text-slate-600">教师：</span>
                      <span className="ml-1 font-medium text-green-600">teacher</span>
                    </div>
                    <div className="flex items-center px-3 py-1.5 bg-purple-50 rounded-full hover:bg-purple-100 transition-colors">
                      <SafetyOutlined className="mr-1.5 text-purple-500" />
                      <span className="text-slate-600">管理员：</span>
                      <span className="ml-1 font-medium text-purple-600">admin</span>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
  );
}


